<template>
	<view class="tab-bar">
		<!-- 首页 -->
		<view class="tab-bar-item" :class="{ active: selected === 0 }" @click="onTabClick(0, tabList[0])">
			<image :src="selected === 0 ? tabList[0].selectedIconPath : tabList[0].iconPath" class="icon" />
			<view class="text">{{ tabList[0].text }}</view>
		</view>

		<!-- 客户 -->
		<view class="tab-bar-item" :class="{ active: selected === 1 }" @click="onTabClick(1, tabList[1])">
			<image :src="selected === 1 ? tabList[1].selectedIconPath : tabList[1].iconPath" class="icon" />
			<view class="text">{{ tabList[1].text }}</view>
		</view>

		<!-- 拓客商店 -->
		<view v-if="display" class="tab-bar-item" style="    flex: 0.6;" :class="{ active: selected === 2 }"
			@click="onTabClick(2, tabList[2])">
			<image :src="selected === 2 ? tabList[2].selectedIconPath : tabList[2].iconPath" class="iimg" />
			<view class="text store-text">{{ tabList[2].text }}</view>
		</view>

		<!-- 官网 -->
		<view class="tab-bar-item" :class="{ active: selected === 3 }" @click="onTabClick(3, tabList[3])">
			<image :src="selected === 3 ? tabList[3].selectedIconPath : tabList[3].iconPath" class="icon" />
			<view class="text">{{ tabList[3].text }}</view>
		</view>

		<!-- 我的 -->
		<view class="tab-bar-item" :class="{ active: selected === 4 }" @click="onTabClick(4, tabList[4])">
			<image :src="selected === 4 ? tabList[4].selectedIconPath : tabList[4].iconPath" class="icon" />
			<view class="text">{{ tabList[4].text }}</view>
		</view>
		<loginModal ref="loginModal" @success="success" />
	</view>
</template>

<script>
import http from '@/utils/http.js'
import loginModal from '@/components/login/index.vue'
export default {
	components: { loginModal },
	props: {
		selected: {
			type: Number,
			default: 0
		},
		display: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			tabList: [
				{
					pagePath: '/pages/index/index',
					iconPath: '/static/images/menu/icon6.png',
					selectedIconPath: '/static/images/menu/icon6-1.png',
					text: '首页'
				},
				{
					pagePath: '/pages/customer/customer',
					iconPath: '/static/images/menu/icon7.png',
					selectedIconPath: '/static/images/menu/icon7-1.png',
					text: '客户'
				},
				{
					pagePath: "pages/store/index",
					iconPath: "/static/images/menu/icon8.png",
					selectedIconPath: "/static/images/menu/icon8.png",
					text: "商城"
				},
				{
					pagePath: '/pages/website/website',
					iconPath: '/static/images/menu/icon9.png',
					selectedIconPath: '/static/images/menu/icon9-1.png',
					text: '官网'
				},
				{
					pagePath: '/pages/my/index',
					iconPath: '/static/images/menu/icon10.png',
					selectedIconPath: '/static/images/menu/icon10-1.png',
					text: '我的'
				}
			]
		}
	},

	methods: {
		onTabClick(index, item) {
			// 检查是否为禁用项
			console.log(index, 'index');
			if (index == 2) {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，去登录？',
						success: (res) => {
							if (res.confirm) {
								this.$parent.login();
							}
						}
					});
					return false
				}
				this.SetNavigateToMiniProgram();
			} else {
				// 如果需要页面跳转，可以在这里处理
				const tabBarPages = [
					'/pages/index/index',
					'/pages/customer/customer',
					'/pages/store/index',
					'/pages/website/website',
					'/pages/my/index'
				];
				if (index >= 0 && index < tabBarPages.length) {
					uni.switchTab({
						url: tabBarPages[index]
					});
				}
			}

		},
		SetNavigateToMiniProgram() {
			http({
				url: 'card/user-profile/get'
			}).then(rest => {
				if (rest.code === 0) {
					http({
						url: '/card/user-profile/thrid/login',
						method: 'POST',
						data: {
							mobile: rest.data.userProfileDO.phoneNumber,
							type: 3
						}
					}).then(res => {
						if (res.code === 0) {
							uni.navigateToMiniProgram({
								appId: 'wx11850f6ae3d9aa17',
								path: res.data,
								success() { },
								fail(err) { }
							});
						}

					})
				}
			})

		},
	}
}
</script>

<style>
.tab-bar {
	width: 100%;
	height: calc(120rpx + var(--safe-area-inset-bottom));
	background: #FFFFFF;
	box-shadow: 0px 0px 20rpx 0px #EEEEEE;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	padding-top: 23rpx;
	box-sizing: border-box;
	z-index: 10000;
}

.tab-bar-item {
	text-align: center;
	flex: 1;
	position: relative;
}

.tab-bar-item .icon {
	width: 58rpx;
	height: 58rpx;
	margin: 0;
	padding: 0;
}

.iimg {
	/* width: 116rpx;
	height:116rpx; */
	width: 100rpx;
	height: 100rpx;
	position: absolute;
	/* top: -60rpx;
	left: calc(50% - 58rpx); */
	top: -52rpx;
	left: calc(50% - 50rpx);
}

.tab-bar-item .text {
	display: block;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	color: #CCCCCC;
	position: relative;
	top: -8rpx;
}

.tab-bar-item .store-text {
	padding-top: 68rpx;
}

.tab-bar-item.active .text {
	display: block;
	color: #000;
}
</style>